<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>layout 后台大布局 - Layui</title>

    <!-- 1.引入layUI的CSS样式.  -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">

</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">layui 后台布局</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item"><a href="welcome.jsp">首页</a></li>
            <li class="layui-nav-item"><a href="user.jsp">用户</a></li>
            <li class="layui-nav-item"><a href="product.jsp">商品</a></li>
            <li class="layui-nav-item"><a href="order.jsp">订单</a></li>
            <li class="layui-nav-item"><a href="guestbook.jsp">留言</a></li>
            <li class="layui-nav-item"><a href="news.jsp">新闻</a></li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item"><a href="javascript:;"> <img
                    src="http://t.cn/RCzsdCq" class="layui-nav-img">
            </a>
                <dl class="layui-nav-child">
                    <dd>
                        <a href="">基本资料</a>
                    </dd>
                    <dd>
                        <a href="">安全设置</a>
                    </dd>
                </dl></li>
            <li class="layui-nav-item"><a href="../index.jsp">返回前台</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!--
      2. 左侧菜单ul:  必须要有class.  和ID.
   -->
            <ul class="layui-nav layui-nav-tree" id="nav" lay-filter="test">
                <li class="layui-nav-item" >
                    <a href="javascript:;">用户管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="user.jsp" target="layadmin-iframe">用户管理</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item" >
                    <a href="javascript:;">商品信息</a>
                    <dl class="layui-nav-child">
                        <dd><a href="productClass.jsp" target="layadmin-iframe">分类管理  </a> </dd>
                        <dd><a href="product.jsp" target="layadmin-iframe">商品管理</a></dd>
                    </dl>
                </li>

                <li class="layui-nav-item" >
                    <a href="javascript:;">订单管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="order.jsp" target="layadmin-iframe">订单管理</a></dd>
                    </dl>
                </li>

                <li class="layui-nav-item" >
                    <a href="javascript:;">留言管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="guestbook.jsp" target="layadmin-iframe">留言管理</a></dd>

                    </dl>
                </li>

                <li class="layui-nav-item" >
                    <a href="javascript:;">新闻管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="news.jsp" target="layadmin-iframe">新闻管理</a></dd>

                    </dl>
                </li>

            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域
        <div style="padding: 15px;">内容主体区域</div> -->
        <!-- 使用内联框架代替: -->
        <iframe src="welcome.jsp" frameborder="0"
                name="layadmin-iframe"
                style=" width: 100%;height:660px; margin: 20px 10px;"
                onload="this.height=this.contentWindow.document.body.scrollHeight">
        </iframe>

    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © layui.com - 底部固定区域
    </div>
</div>

<!-- 3.必须引入: layUI的js脚本.
           同时引入jquery的脚本.
-->
<script src="../layui/layui.js"></script>


<!--  4.引入element元素对象. -->
<script>
    var $=layui.$;
    //JavaScript代码区域
    layui.use('element', function() {
        var element = layui.element;
    });
</script>

<!-- 5.通过ajax请求后台服务器:  返回菜单集合. 并动态构建菜单.

-->
<script type="text/javascript">
    //菜单循环遍历打印拼接操作

</script>

</body>
</html>